<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img,ul,li{
				margin: 0;
				padding: 0;
			}
			#contair{
				position: relative;
				width: 200px;
				height: 200px;
				overflow: hidden;
				white-space: nowrap;
				margin: 0 auto;
			}
			li{
				float: left;
				display:inline
			}
			ul{
				width: 1000px;
				height: 200px;
				list-style: none;
				white-space: nowrap;
				position: relative;
			}
			#dian{
				height: 5px;
				position: absolute;
				bottom: 15px;
				left: 50%;
			}
			#dian li{
				float: left;
				display: inline-block;
				height: 5px;
				width: 5px;
				background-color: red;
				margin-left: 5px;
			}
			.active{
				background-color: aqua !important;
			}
		</style>
	</head>
	<body>
		<div id="contair">
			<ul id="imgBox">
				<li><img src="./imgages/nav-3.png" width="200px"></li>
				<li><img src="./imgages/nav-1.png" width="200px"></li>
				<li><img src="./imgages/nav-2.png" width="200px"></li>
				<li><img src="./imgages/nav-3.png" width="200px"></li>
				<li><img src="./imgages/nav-1.png" width="200px"></li>
			</ul>
			<ul id="dian">
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var contair = document.getElementById('contair')
			var imgBox = document.getElementById('imgBox')
			var dians = document.getElementById('dian')
			var lis = dians.querySelectorAll('li')
			var index = 0
			console.log(lis[0])
			var timeId = setInterval(function () {
				if (index >= 5) index = 0
				imgBox.style.left = - (index * 200) + 'px'
				if (index != 0) { lis[index-1].className = '' }
				
				lis[index].className = 'active'
				index++
				
				
			}, 1000)
			
		</script>
	</body>
</html>
